<template>
    <div class="box">
        <h3>axios的请求响应拦截器定义</h3>、

        <ul>
            <li>按照axios的 拦截定义语法完成请求拦截定义描述</li>
            <li>在需要使用异步请求的代码中通过拦截的axios对象进行请求发送</li>

        </ul>
        <p>axios 在node 模块环境中的使用注意事项</p>
        <ul>
            <li>node的模块加载是具有缓存功能的所以无论项目中的什么位置进行同一模块的多次加载，始终读取的都是同一个对象</li>
            <li>.vue单文件组件export default 以外的js代码属于加载时直接运行全局代码，所以这部分代码无论组件是否使用都会在运行初期直接完成执行</li>
            <li>直接对axios进行操作的所有的全局配置{默认地址，超时时间，拦截器} 会在所有给予axios 发送的请求只不过生效</li>
            <li>但在实际开发时 ，一个模块项目可能会对接多个不同 的后台服务器，此时axios 的配置需要区分服务器，可以采用axios的副本构建工具创建副本</li>
            <li>
                方法：   const init=axios.create()
            </li>
        </ul>


        <p>{{ result }}</p>
        <p>{{ result.data }}</p>
        <p>{{ result.msg }}</p>
        <p>{{ result.state }}</p>
        <input type="button" value="加载资源" @click="loaddata()">
        <input type="button" value="加载资源2" @click="loaddata2()">
    </div>
       
    
</template>
<script>
    import axios from 'axios'
    const request=axios.create()
    const ERROR_MSG={
        ERROR_NETWORK:'网络异常，请检查网络',
        ECONNABORTED:'请求超时，请稍后重试'
    };
    const HTTP_MSG={
        401:'未授权',
        404:'访问资源不存在',
        500:'服务器出现异常',
        DEFAULT:'服务器太慢了，你待会再试'
    }
request.interceptors.request.use(
    function (config) {
        return config;
    },
    function (error) {
        // 继续保持 Promise 错误对象的返回，让后续的调用方法可以继续调用Promise语法
        return Promise.reject(error);
    }
)
request.interceptors.response.use(
    function (response) {
        console.log("响应")
        // 提前处理了响应数据，让后续的axios 的成功结果直接是 后台数据
        return response.data;
    },
    function (error) {
        let msg = "";
        if (error.response) {//有响应的情况下
            msg = HTTP_MSG[error.response.status];
        } else {
            msg = ERROR_MSG[error.code]
        }
        alert(msg)
        // 继续保持 Promise 错误对象的返回，让后续的调用方法可以继续调用Promise语法,同时在浏览器控制台提示错误[为开发者服务的]
        return Promise.reject(msg)
    }
)
export default {
    data(){
        return {
            result:{}
        }
    },
    methods:{
        loaddata(){
            request.get("http://127.0.0.1:3000/public/types")
            .then((data)=>{
                console.log(data);
                
                this.result=data
            })
        },
      async  loaddata2(){
          this.result = await request.get("http://127.0.0.1:3000/public/types")
      }
    },

}

</script>